/**
* @description : demo 示例
* @descriptionDetail : 示例
* @copyright : 浙江烟草
* @author : mc
* @create : 2022-12-05 16:15:51
*/
<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
			<!-- 导航栏右侧搜索 -->
			<view class="nav-right-icon">
				<u-icon color="#FFF" name="search" size="38" @tap="handlerShowSearch"></u-icon>
			</view>
		</theme-navbar>
		<!-- #endif -->
		<u-popup mode="top" border-radius="30" height="80%" v-model="showSearch">
			<u-form style="padding: 5px 10px;" :model="formData" :error-type="errorType" ref="uForm">
				<u-form-item :label-width="labelWidth" label="字典组件" prop="dCodeName" required>
					<z-dict-select dictType="C_CASE_SOURCE" v-model="formData.dCodeName" @confirm="handleConfirm"></z-dict-select>
				</u-form-item>
				<u-form-item :label-width="labelWidth" label="字典多选" prop="checkboxs">
					<z-dict-checkbox dictType="C_AREA_TYPE" v-model="formData.checkboxs"></z-dict-checkbox>
				</u-form-item>
				<u-form-item :label-width="labelWidth" label="字典多选弹窗" prop="checkboxListName" required>
					<z-dict-checkbox :popup="true" dictType="C_STAT_TYPE" v-model="formData.checkboxListName"
						@confirm="handleCk"></z-dict-checkbox>
				</u-form-item>
				<u-form-item :label-width="labelWidth" label="组织机构" prop="areaCode">
					<z-org-select v-model="formData.orgName" @confirm="handleOrgConfirm"></z-org-select>
				</u-form-item>
				<u-form-item :label-width="labelWidth" label="文本" prop="text">
					<u-input placeholder="请输入" v-model="formData.text" />
				</u-form-item>
			</u-form>
			<u-row gutter="16">
				<u-col span="6" text-align="center">
					<u-button type="primary" size="medium" @click="handleSearch">
						搜索
					</u-button>
				</u-col>
				<u-col span="6" text-align="center">
					<u-button size="medium" @click="showSearch=false">
						关闭
					</u-button>
				</u-col>
			</u-row>
		</u-popup>
		<u-card :title="menu.title" :sub-title="menu.subTitle" v-for="(menu, idx) in menus" :key="idx">
			<template #body>
				<view>
					<u-button size="medium" type="primary" style="margin: 3px;" v-for="(item, index) in menu.children"
						:key="index" @click="item.click ? item.click.apply(this) : handlerGoto(item.url)">
						{{ item.name }}
					</u-button>
				</view>
			</template>
		</u-card>

		<u-card :title="'滑屏页'">
			<template #body>
				<view>
					<z-swiper :autoPlay="false">
						<z-slide v-for="(item,index) in list" :key="index">
							<u-form style="padding: 5px 10px;" :model="formData" :error-type="errorType">
								<u-form-item :label-width="labelWidth" label="字典组件" prop="dCodeName" required>
									<z-dict-select dictType="C_CASE_SOURCE" v-model="formData.dCodeName"
										@confirm="handleConfirm"></z-dict-select>
								</u-form-item>
								<u-form-item :label-width="labelWidth" label="字典多选" prop="checkboxs">
									<z-dict-checkbox dictType="C_AREA_TYPE" v-model="formData.checkboxs"></z-dict-checkbox>
								</u-form-item>
								<u-form-item :label-width="labelWidth" label="字典多选弹窗" prop="checkboxListName" required>
									<z-dict-checkbox :popup="true" dictType="C_STAT_TYPE" v-model="formData.checkboxListName"
										@confirm="handleCk"></z-dict-checkbox>
								</u-form-item>
								<u-form-item :label-width="labelWidth" label="组织机构" prop="areaCode">
									<z-org-select v-model="formData.orgName" @confirm="handleOrgConfirm"></z-org-select>
								</u-form-item>
								<u-form-item :label-width="labelWidth" label="文本" prop="text">
									<u-input placeholder="请输入" v-model="formData.text" />
								</u-form-item>
							</u-form>
						</z-slide>
					</z-swiper>
				</view>
			</template>
		</u-card>

		<u-button type="primary" @click="toDDSDK">钉钉SDK示例</u-button>
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
	</view>
</template>
<script>
	import {
		ZDictSelect,
		ZDictCheckbox,
		ZOrgSelect,
		ZSwiper,
		ZSlide,
	} from '@/components'
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			ZDictSelect,
			ZDictCheckbox,
			fabButton,
			ZOrgSelect,
			ZSwiper,
			ZSlide,
		},
		data() {
			return {
				showSearch: false, // 显示搜索条件
				menus: [{
						title: "table列表演示组件",
						subTitle: "上拉加载、下拉刷新",
						children: [{
								name: "单table演示",
								url: "/pages/demo/table/SingleTableDemo",
							},
							{
								name: "多table演示",
								url: "/pages/demo/table/MultiTableDemo",
							},
							{
								name: "(统计)列表",
								url: "/pages/demo/table/TjTable",
							},
							{
								name: "(分页统计)列表",
								url: "/pages/demo/table/TjTables",
							},
						],
					},
					{
						title: "表单组件",
						subTitle: "",
						children: [{
							name: "打开",
							url: "/pages/demo/form",
						}, ],
					},
					{
						title: "常用提示、加载等",
						subTitle: "",
						children: [{
								name: "alert",
								click: () => {
									this.$modal.alert("点击了alert");
									// 可添加点击确认事件
									// this.$modal.alert("点击了alert", () => {
									//   this.$u.toast("点击了确定,再做点啥吧");
									// });
								},
							},
							{
								name: "confirm",
								click: () => {
									this.$modal.confirm("这是一个确认框组件", () => {
										this.$u.toast("点击了确定,开始其他业务操作吧");
									}, () => {
										this.$u.toast("点击了取消");
									});
								},
							},
							{
								name: "loading",
								click: () => {
									this.$modal.showLoading("加载中...");
									setTimeout(() => this.$modal.hideLoading(), 3000);
								},
							},
							{
								name: "hideLoading",
								click: () => {
									this.$modal.hideLoading();
								},
							},
							{
								name: "toast轻提示",
								click: () => {
									this.$modal.toast("这是一个轻提示,简单提示时使用");
								},
							},
						],
					},
					{
						title: "PDF预览",
						subTitle: "",
						children: [{
							name: "打开",
							url: "/pages/demo/viewPdf",
						}, ],
					},
				],
				formData: {
					dCode: '',
					dCodeName: '',
					checkboxList: '',
					checkboxListName: '',
					orgUuid: '',
					orgName: '',
					checkboxs: "3001,3002",
					text: "",
				},
				labelPosition: 'left',
				labelWidth: 180,
				labelAlign: "left",
				errorType: ['border-bottom', 'message', ],
				list: [{
						img: 'https://qiniu.epipe.cn/5456575529551388672?imageslim&imageView2/1/w/750/h/360',
					},
					{
						img: 'https://qiniu.epipe.cn/5430983074181545984?imageslim&imageView2/1/w/750/h/360',
					},
					{
						img: 'https://qiniu.epipe.cn/5464226412548325376?imageslim&imageView2/1/w/750/h/360',
					},
				],
				fContent: [{
						iconPath: require("@/static/add.png"),
						selectedIconPath: require("@/static/add.png"),
						text: '添加',
						active: false,
					},
					{
						iconPath: require("@/static/sou.png"),
						selectedIconPath: require("@/static/sou.png"),
						text: '筛选',
						active: false,
					},
				],
			};
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		// 页面加载成功后也要设置一次，用于处理本页面刷新后失效问题
		mounted() {
			this.setRightBtns();
		},
		created() {
			console.log(this.$toast);
		},
		methods: {
			fabtrigger(){},
			// 钉钉上设置右侧标题
			setRightBtns() {
				// 先放开右侧标题
				// this.$dd.setRight("", () => { }, true, true);
				// 设置右侧多按钮，苹果手机对此接口的格式要求比较严格，不能出现多余的符号
				// let menuItemStr = '[{"id":"1","text":"搜索","iconId":"search"}]';
				// this.$dd.setMenu(JSON.parse(menuItemStr), res => {
				//   if(res.id == 1){
				//     this.handlerShowSearch();
				//   }
				// });

			},
			handlerShowSearch() {
				this.showSearch = true;
			},
			// 单选赋值
			handleConfirm(dict) {
				this.formData.dCode = dict.value;
				this.formData.dCodeName = dict.label;
			},
			handleCk({
				name,
				value,
			}) {
				this.formData.checkboxList = value;
				this.formData.checkboxListName = name;
			},
			handleOrgConfirm(arg) {
				console.log("选中的组织机构", arg);
				this.formData.orgUuid = arg.value;
				this.formData.orgName = arg.name;
			},
			// 搜索操作
			handleSearch() {
				this.$refs.uForm.validate().then(valid => {
					console.log("校验结果", valid, this.formData);
					if (valid) {
						this.$u.toast('校验通过')
					} else {
						this.$u.toast('请检查')
					}
				}).catch(errors => {
					console.error(errors);
					this.$u.toast('校验失败')
				})
			},
			handlerGoto(url) {
				uni.navigateTo({
					url: url,
				});
			},
			toDDSDK() {
				this.$u.route({
					url: '/pages/demo/ddsdk',
				});

			},
		},
	};
</script>
<style lang="scss" scoped>
	@import "@/style/common/rightMenu.scss";
</style>